<template>
  <div class="client-points">
    <div class="mateCascader">
      <el-select :value="organizationId" @change="organizationSelectChange">
        <el-option
          v-for="item in organizationList"
          :key="item.id"
          :label="item.name"
          :value="item.id"
        >
        </el-option>
      </el-select>
    </div>
    <div class="client-main">
      <el-row :gutter="24">
        <el-col :span="24">
          <NewCard title="客户分配" :border="false" :isright="true">
            <template slot="right">
              <ComForm
                title="搜索"
                :list="comForm"
                @EventOnsubmit="inqueryFn"
              ></ComForm>
            </template>

            <el-table
              :data="DiversionChannelList"
              style="width: 100%"
              highlight-current-row
              v-hasPermi="['base:Organization:diversionChannelList']"
            >
              <el-table-column prop="nickName" label="圈主"> </el-table-column>
              <el-table-column label="手机号">
                <template slot-scope="scope">
                  <p>{{ scope.row.phone }}</p>
                </template>
              </el-table-column>
              <el-table-column label="商务专员">
                <template slot-scope="scope">
                  <el-dropdown
                    @command="
                      (cmId) => {
                        chanceCmOrPlaceFn(scope.row, cmId, true);
                      }
                    "
                    v-hasPermi="['base:Organization:diversionChannelEdit']"
                  >
                    <span class="el-dropdown-link">
                      {{ getcmName(scope.row.cmId) }}
                      <i class="el-icon-caret-bottom"></i>
                    </span>
                    <el-dropdown-menu class="el-dropdown-box" slot="dropdown">
                      <el-dropdown-item
                        :command="item.id"
                        v-for="(item, index) in ManagerList"
                        :key="index"
                        >{{ item.name }}</el-dropdown-item
                      >
                    </el-dropdown-menu>
                  </el-dropdown>
                </template>
              </el-table-column>
              <el-table-column label="渠道专员" v-hasPermi="['work:commercialManager:placeListAll']">
                <template slot-scope="scope">
                  <el-dropdown
                    @command="
                      (placeId) => {
                        chanceCmOrPlaceFn(scope.row, placeId, false);
                      }
                    "
                    v-hasPermi="['base:Organization:diversionChannelEdit']"
                  >
                    <span class="el-dropdown-link">
                      {{ getPlaceName(scope.row.placeId) }}
                      <i class="el-icon-caret-bottom"></i>
                    </span>
                    <el-dropdown-menu class="el-dropdown-box" slot="dropdown">
                      <el-dropdown-item
                        :command="item.id"
                        v-for="(item, index) in placeList"
                        :key="index"
                        >{{ item.name }}</el-dropdown-item
                      >
                    </el-dropdown-menu>
                  </el-dropdown>
                </template>
              </el-table-column>
              <el-table-column label="注册时间" prop="createTime">
              </el-table-column>
              <el-table-column label="充值金额">
                <template slot-scope="scope">
                  <p>{{ scope.row.amount | sumFilters }}</p>
                </template>
              </el-table-column>
            </el-table>
            <!-- 分页器 -->
            <div class="pagination">
              <el-pagination
                @size-change="sizeChange"
                @current-change="currentChange"
                :current-page="pageing.pageNum"
                :page-sizes="[10, 20, 30, 40]"
                :page-size="pageing.pageSize"
                layout="total, sizes, prev, pager, next, jumper"
                :total="pageing.total"
              >
              </el-pagination>
            </div>
          </NewCard>
        </el-col>

        <!-- <el-col :span="8">
          <EditFrom></EditFrom>
        </el-col> -->
      </el-row>
    </div>
  </div>
</template>

<script>
import NewCard from "@/wss/components/newCard.vue";
import ComForm from "@/wss/components/comForm.vue";
import EditFrom from "./editFrom.vue";

import {
  getlabelOrganizationApi,
  getPrganizationdiversionChannelPutApi,
} from "@/wss/newApi_3-24/base/organization.js";
import {
  getCommercialManagerApi,
  getcommercialManagerplaceListAllApi,
} from "@/wss/newApi_3-24/work/commercialManager.js";
export default {
  name: "clientPoints",
  components: { NewCard, ComForm, EditFrom },
  props: {
    // 组织列表
    organizationList: {
      type: Array,
      default: [],
    },
    // 初始化组织id
    organizationId: {
      type: String,
      default: "",
    },
  },
  data() {
    return {
      // 商务数组
      ManagerList: [],
      // 渠道专员
      placeList: [],
      // 分渠数组
      DiversionChannelList: [],
      selectValue: "122", //选择的值
      optionList: [
        { id: "122", title: "三师科技" },
        { id: "123", title: "法通咨询" },
      ],
      // 表单配置
      comForm: {
        modes: [
          {
            mode: "nickName",
            formType: "input",
            placeholder: "圈主",
          },
          {
            mode: "cmName",
            formType: "input",
            placeholder: "商务专员",
          },
          {
            mode: "placeName",
            formType: "input",
            placeholder: "渠道专员",
          },
        ],
      },
      //分页参数
      pageing: { pageNum: 1, pageSize: 10, total: 0, organizationId: "" },
      // 客户分渠列表
      clientPointsList: [],
    };
  },
  created() {
    this.getlabelOrganizationFn(this.organizationId);
    this.getcommercialManagerplaceListFn(this.organizationId);
    this.getCommercialManagerFn(this.organizationId);
  },
  computed: {
    // 获取商务名字
    getcmName() {
      return (cmId) => {
        console.log(this.ManagerList, cmId, "--------------------");
        return this.ManagerList.find((item) => item.id == cmId)?.name;
      };
    },
    // 获取渠道
    getPlaceName() {
      return (placeId) =>
        this.placeList.find((item) => item.id == placeId)?.name;
    },
  },
  methods: {
    // 查询函数
    inqueryFn(arr) {
      const pageing = this.pageing;
      // 获取查询参数
      arr.forEach((item) => {
        for (const key in item) {
          pageing[key] = item[key];
        }
      });
      this.getlabelOrganizationFn(this.organizationId);
    },
    currentChange(pageNum) {
      this.pageing.pageNum = pageNum;
      this.getlabelOrganizationFn(this.organizationId);
    },
    // 页容量发生变化
    sizeChange(pageSize) {
      this.pageing.pageSize = pageSize;
      this.getlabelOrganizationFn(this.organizationId);
    },
    // 查询所有商务经理
    async getCommercialManagerFn(organizationId) {
      let { code, rows } = await getCommercialManagerApi({
        organizationId: organizationId,
      });

      if (code != 200) return;
      this.ManagerList = JSON.parse(JSON.stringify(rows));
    },
    // 获取所有渠道
    async getcommercialManagerplaceListFn(organizationId) {
      let { code, rows } = await getcommercialManagerplaceListAllApi({
        organizationId: organizationId,
      });
      if (code != 200) return;

      this.placeList = JSON.parse(JSON.stringify(rows));
    },

    // 修改分渠和商务
    async chanceCmOrPlaceFn(item, Id, isCm) {
      if (isCm) {
        item.cmId = Id;
      } else {
        item.placeId = Id;
      }
      let { code, msg } = await getPrganizationdiversionChannelPutApi(item);
      if (code != 200) return;
      this.$message({
        type: "success",
        message: msg,
      });
    },

    // 改变组织id
    changeOrganizationId(organizationId) {
      this.$emit("update:organizationId", organizationId);
      this.getlabelOrganizationFn(organizationId);
    },
    // 组织选择发生
    organizationSelectChange(organizationId) {
      console.log(organizationId);

      this.changeOrganizationId(organizationId);
      this.getcommercialManagerplaceListFn(organizationId);
      this.getCommercialManagerFn(organizationId);
      // 重新获取商务、渠道
    },
    // 获取渠道
    async getlabelOrganizationFn(organizationId) {
      this.pageing.organizationId = organizationId;
      let { code, rows, total } = await getlabelOrganizationApi(this.pageing);
      if (code != 200) return;
      this.DiversionChannelList = JSON.parse(JSON.stringify(rows));
      this.pageing.total = total;

      // console.log(rows, "zheshiyige ");
    },
  },
};
</script>

<style scoped>
.client-points {
  height: 100%;
}
::v-deep .client-main .el-card__body {
  position: relative;
  height: 100%;
}
::v-deep .client-main .el-card__body > div {
  height: 92%;
  overflow-y: auto;
}
::v-deep .client-main .el-card__body > div::-webkit-scrollbar {
  width: 0;
}

/* 选择器 */
.mateCascader {
  /* height: 6%; */
  margin-bottom: 20px;
}
::v-deep .mateCascader .el-select {
  padding: 0 10px;
  border-radius: 8px;
  width: 320px;
  background-color: #F5F6F8;
}
::v-deep .mateCascader .el-select .el-input__inner {
  border: 0;
  background-color: transparent;
  padding-left: 0;
  font-size: 20px;
  font-weight: 600;
  color: #2e3f5e;
}
::v-deep .mateCascader .el-select .el-select__caret {
  color: #2e3f5e;
}
::v-deep .mateCascader .el-select .el-select__caret:before {
  content: "\E78F";
}
.el-select-dropdown .el-select-dropdown__item.selected {
  color: #f87a23;
}

/* 内容区 */
.client-main {
  height: calc(100% - 60px);
}
.client-main .el-row,
.client-main .el-col {
  height: 100%;
}

/* 分页器 */
::v-deep .client-main .pagination {
  text-align: center;
  margin-top: 30px;
  margin-bottom: 50px;
}

/* 表单样式 */
::v-deep .client-main .el-form .el-input--medium {
  width: 140px !important;
}
::v-deep .client-main .el-form .el-form-item .el-button--default {
  display: none;
}

/* 表格样式 */
::v-deep .el-table .el-table__header-wrapper th {
  background-color: #fff;
}
::v-deep .el-table th.is-leaf {
  border-top: 1px solid #efefef;
  border-bottom: 1px solid #efefef;
}
::v-deep .el-table th > .cell {
  font-size: 12px;
  color: #909aaa;
}
::v-deep .el-table .cell,
::v-deep .el-table .cell p {
  margin: 0;
  font-size: 14px;
  color: #2e3f5e;
}
::v-deep .el-table .cell .el-button {
  color: #f87a23;
}
::v-deep .el-table .cell .el-table__expand-icon i::before {
  content: "\E791";
}
::v-deep .el-table td {
  /* border-bottom: 0; */
}
::v-deep .el-table td .islight {
  color: #f87a23;
}
::v-deep .el-table .el-table__expanded-cell[class*="cell"] {
  padding: 0;
}
::v-deep .el-table__expanded-cell .el-table::before {
  height: 0;
}
::v-deep .el-table__expanded-cell .el-table th.is-leaf {
  border-top: 0;
}
::v-deep .el-table__expanded-cell .el-table td {
  border-bottom: 0;
}
.assistant-box span:last-child > i {
  display: none;
}
.el-dropdown-link {
  color: black;
}

.el-dropdown-box {
  max-height: 400px;
  overflow-y: scroll;
}

/* 表格样式 end */
</style>